<div class="deployment-tile">
  <div row class="service-title" ng-if="service">
    <div>
      Service:
      <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>
    </div>
    <div ng-if="weightByService[service.metadata.name]" class="service-metadata">
      <ng-include src="'views/overview/_traffic-percent.html'"></ng-include>
    </div>
  </div>
  <div class="deployment-header">
    <div class="rc-header">
      <div>
        Deployment:
        <a ng-href="{{deploymentConfig | navigateResourceURL}}">{{dcName}}</a>
      </div>
      <div>
        <relative-timestamp ng-if="activeDeployment && !anyDeploymentInProgress" timestamp="activeDeployment.metadata.creationTimestamp"></relative-timestamp>
        <span ng-if="anyDeploymentInProgress">
          {{deploymentConfig.spec.strategy.type}} deployment in progress...
        </span>
      </div>
    </div>
    <div column flex class="shield" ng-if="activeDeployment"
          ng-class="{ 'shield-lg': (activeDeployment | annotation: 'deploymentVersion').length > 3 }">
      <a ng-href="{{activeDeployment | navigateResourceURL}}">
        <span class="shield-number">#{{activeDeployment | annotation: 'deploymentVersion'}}</span>
      </a>
    </div>
  </div>
  <div row class="deployment-body">
    <!-- all visible deployments -->
    <div column class="overview-donut"
        ng-repeat="deployment in orderedDeployments track by (deployment | uid)"
        ng-class="{ latest: isDeploymentLatest(deployment) }"
        ng-if="!activeDeployment || !(isDeploymentLatest(deployment) && ((deployment | deploymentStatus) == 'Cancelled' || (deployment | deploymentStatus) == 'Failed'))">
      <deployment-donut
          rc="deployment"
          deployment-config="deploymentConfigs[dcName]"
          pods="podsByDeployment[deployment.metadata.name]"
          hpa="getHPA(deployment.metadata.name, dcName)"
          limit-ranges="limitRanges"
          scalable="isScalableDeployment(deployment)"
          alerts="alerts">
      </deployment-donut>
    </div>
    <!-- /all visible deployments -->

    <!-- deployment in progress (connecting arrow) -->
    <div column class="overview-donut-connector" ng-if="anyDeploymentInProgress">
      <div ng-if="deployments.length > 1" class="deployment-connector-arrow">
        &rarr;
      </div>
      <div ng-if="deployments.length === 1" class="deployment-status-msg">
        <status-icon status="deployments[0] | deploymentStatus" class="mar-right-xs"></status-icon>
        Deployment&nbsp;#{{deployments[0] | annotation : 'deploymentVersion'}}
        {{deployments[0] | deploymentStatus | lowercase}}
        <div ng-if="'deploymentconfigs/log' | canI : 'get'" class="deployment-log-link">
          <a ng-href="{{deployments[0] | navigateResourceURL}}?tab=logs">View Log</a>
        </div>
      </div>
    </div>
    <!-- /deployment in progress (connecting arrow) -->

    <!-- cancelled/failed state -->
    <div column class="overview-unsuccessful-state" ng-if="!activeDeployment && !anyDeploymentInProgress" ng-switch="deployments[0] | deploymentStatus">
      <div ng-switch-when="Cancelled">
        <span class="text-warning deployment-status-msg">
          <i class="fa fa-ban" aria-hidden="true"></i>
          {{dcName}}
          <a ng-href="{{deployments[0] | navigateResourceURL}}">#{{deployments[0] | annotation: 'deploymentVersion'}}</a>
          cancelled
        </span>
      </div>
      <div ng-switch-when="Failed">
        <span class="text-danger deployment-status-msg">
          <i class="fa fa-times" aria-hidden="true"></i>
          {{dcName}}
          <a ng-href="{{deployments[0] | navigateResourceURL}}">#{{deployments[0] | annotation: 'deploymentVersion'}}</a>
          failed
        </span>
      </div>
    </div>
    <!-- /cancelled/failed state -->

    <!-- succeeded state -->
    <div column class="deployment-details" ng-if="activeDeployment && !anyDeploymentInProgress">
      <!-- metrics or pod template -->
      <!-- pause metrics updates when the service group is collapsed -->
      <metrics ng-if="showMetrics && !collapse" deployment="activeDeployment" profile="compact" class="overview-metrics"></metrics>
      <pod-template ng-if="!showMetrics" pod-template="activeDeployment.spec.template"></pod-template>
      <!-- /metrics or pod template -->
    </div>
    <!-- /succeeded state -->
  </div>
</div>
